@extends('layout.master')

@section('content-header')
    <h1>Laporan Kipem</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-angle-right"></i> Laporan Kipem</li>
    </ol>
@stop

@section('content')
<style type="text/css">
    #box-filter li {
        margin-top: 15px;
    }
    #box-filter .collapse-toggle {
        margin-top: 30px;
    }
    #all-kipems-table th {
        vertical-align: middle;
    }
    .label-kategori{
        font-weight: normal;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body table-responsive">
                <div class="row">
                    <div id="box-filter" class="col-md-12 no-padding">
                        <ul class="list-unstyled clearfix">
                            <li class="col-xs-3">
                                Nomor KTP
                                <input type="text" id="fl_ktp" class="form-control input-sm" placeholder="Nomor KTP"/>
                            </li>
                            <li class="col-xs-3">
                                Nama
                                <input type="text" id="fl_nama" class="form-control input-sm" placeholder="Nama penduduk"/>
                            </li>
                            <li class="col-xs-3">
                                Umur
                                <div class="row">
                                    <div class="col-xs-6">
                                        <input type="number" min="0" id="fl_umur_awal" class="form-control form-normal input-sm" placeholder="Awal"/>
                                    </div>
                                    <div class="col-xs-6">
                                        <input type="number" min="0" id="fl_umur_akhir" class="form-control form-normal input-sm" placeholder="Akhir"/>
                                    </div>
                                </div>
                            </li>
                            <li class="col-xs-3">
                                Jenis Kelamin
                                <select id="fl_jk" class="form-control input-sm">
                                    <option value="">Semua jenis</option>
                                    <option value="L">Laki</option>
                                    <option value="P">Perempuan</option>
                                </select>
                            </li>
                            <li class="col-xs-3">
                                Golongan darah
                                <select id="fl_gol" class="form-control input-sm">
                                    <option value="">Semua golongan darah</option>
                                    <option value="O">O</option>
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="AB">AB</option>
                                </select>
                            </li>
                            <li class="col-xs-3">
                                Status kawin
                                <select id="fl_kawin" class="form-control input-sm">
                                    <option value="">Semua status</option>
                                    <option value="kawin">Kawin</option>
                                    <option value="belum kawin">Belum kawin</option>
                                    <option value="cerai mati">Cerai mati</option>
                                    <option value="cerai hidup">Cerai hidup</option>
                                </select>
                            </li>
                            <li class="col-xs-3">
                                Lokasi
                                <input type="text" id="fl_lokasi" class="form-control input-sm" placeholder="Lokasi"/>
                            </li>
                        </ul>
                        <ul class="list-unstyled clearfix">
                            <li class="col-xs-3">
                                Agama
                                <br>
                                @foreach ($agamas as $key => $agama)
                                    {{ Form::checkbox('fl_agama', $key, false, array('class'=>'form-control agama_filter')) }}
                                    {{ $agama }}
                                    <br>
                                @endforeach
                            </li>
                            <li class="col-xs-3">
                                Pendidikan
                                <br>
                                @foreach ($pendidikans as $key => $pendidikan)
                                    {{ Form::checkbox('fl_pendidikan', $key, false, array('class'=>'form-control pendidikan_filter')) }}
                                    {{ $pendidikan }}
                                    <br>
                                @endforeach
                            </li>
                            <li class="col-xs-3">
                                Jenis Pekerjaan
                                <br>
                                @foreach ($jenispekerjaans as $key => $jenispekerjaan)
                                    {{ Form::checkbox('fl_pekerjaan', $key, false, array('class'=>'form-control pekerjaan_filter')) }}
                                    {{ $jenispekerjaan }}
                                    <br>
                                @endforeach
                            </li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-cari" style="margin-left:15px;"><i class="fa fa-search"></i> Cari</a>
                    </div>
                </div>
                <hr>
                <table id="all-kipems-table" class="table table-bordered table-striped">
                    <thead>
                        <tr class="center">
                            <th>#</th>
                            <th>No. KTP</th>
                            <th>Nama</th>
                            <th>Umur</th>
                            <th>Jenis Kelamin</th>
                            <th>Gol. Darah</th>
                            <th>Status Kawin</th>
                            <th>Agama</th>
                            <th>Pekerjaan</th>
                            <th>Pendidikan</th>
                            <th>Lokasi</th>
                            <th width="10%">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    var fl_no_ktp = "";
    var fl_nama = "";
    var fl_umur_awal = "";
    var fl_umur_akhir = "";
    var fl_jk = "";
    var fl_gol = "";
    var fl_kawin = "";
    var fl_lokasi = "";
    var fl_agama = [];
    var fl_pekerjaan = [];
    var fl_pendidikan = [];

    $(document).ready(function() {
        /**
         * All Penduduks Data table
         * 
         */
        allTable = $('#all-kipems-table').dataTable({
            "aoColumns": [
                { "bSearchable": true, "bSortable": true, "bVisible": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false },
                { "sClass": "text-center capitalize-text", "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": false },
                { "sClass": "text-center", "bSearchable": false, "bSortable": false }
            ],
            "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "iDisplayLength": 50,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ URL::route('laporan.kipemall') }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnServerData": function( sSource, aoData, fnCallback ){                           
                aoData.push( 
                    { "name" : "fl_no_ktp", "value" : fl_no_ktp},
                    { "name" : "fl_nama", "value" : fl_nama},
                    { "name" : "fl_umur_awal", "value" : fl_umur_awal},
                    { "name" : "fl_umur_akhir", "value" : fl_umur_akhir},
                    { "name" : "fl_jk", "value" : fl_jk},
                    { "name" : "fl_gol", "value" : fl_gol},
                    { "name" : "fl_kawin", "value" : fl_kawin},
                    { "name" : "fl_agama", "value" : fl_agama},
                    { "name" : "fl_pekerjaan", "value" : fl_pekerjaan},
                    { "name" : "fl_pendidikan", "value" : fl_pendidikan},
                    { "name" : "fl_lokasi", "value" : fl_lokasi}
                );
                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json);                        
                });
            }
        });

        /**
         * Filtering          
         */
        $('#box-filter').on('click', '.btn-cari', function(event) {
            event.preventDefault();
            /* Act on the event */
            fl_no_ktp = $('#fl_no_ktp').val();
            fl_nama = $('#fl_nama').val();
            fl_jk = $('#fl_jk').val();
            fl_gol = $('#fl_gol').val();
            fl_kawin = $('#fl_kawin').val();
            fl_lokasi = $('#fl_lokasi').val();
            fl_umur_awal = $('#fl_umur_awal').val();
            fl_umur_akhir = $('#fl_umur_akhir').val();

            fl_agama = [];
            fl_pekerjaan = [];
            fl_pendidikan = [];

            $('.agama_filter').each(function(index, el) {
                if ($(this).is(':checked')) {
                    fl_agama.push($(this).val());
                };
            });
            fl_agama.toString();
            $('.pekerjaan_filter').each(function(index, el) {
                if ($(this).is(':checked')) {
                    fl_pekerjaan.push($(this).val());
                };
            });
            fl_pekerjaan.toString();
            $('.pendidikan_filter').each(function(index, el) {
                if ($(this).is(':checked')) {
                    fl_pendidikan.push($(this).val());
                };
            });
            fl_pendidikan.toString();
            allTable.fnReloadAjax();
        });
        /**
         * End of Filtering
         */
    });
</script>
@stop